<template>
  <div>
    <!-- <button @click="transmit">点我传参</button> -->
    <div v-for="item in mydata" :key="item">
      <el-radio-group v-for="(popVal,popKey) in item" v-model="skuResult[popKey]" :key="popKey">
        <div class="sku">{{popKey}}:</div>

        <el-radio-button
          @click.native.prevent="cancel(label.productPropertyValueId,popKey,label.isDisable)"
          class="button"
          :disabled="label.isDisable"
          :label="label.productPropertyValueId"
          v-for="label in popVal"
          :key="label.productPropertyValueId"
        >
          <div class="pro-category">
            <el-image
              v-if="label.productPropertyImage"
              :src="label.productPropertyImage"
              style="width: 25px; height: 25px"
            ></el-image>
            <span>{{label.productPropertyValue}}</span>
          </div>
        </el-radio-button>
      </el-radio-group>
    </div>

    <!--    <div v-for="item in mydata.choices">-->
    <!--      <div v-for="(popVal,popKey) in item">-->
    <!--        {{popKey}}:-->
    <!--        <div v-for="label in popVal">-->
    <!--          {{label.productPropertyValue}}-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!-- {{string}} -->
    <!-- {{skuResult}} -->
    <br />
    <!-- {{skuResultVal}} -->
    <!-- {{lianjie}} -->
  </div>
</template>

<script>
import { getSku } from "network/charity.js";
export default {
  name: "SkuTest",
  props: {
    productInfoPO: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      skuResult: {},
      skuResultVal: {},
      sre: "",
      skuActiveCB: {},
      lianjie: ""
    };
  },

  methods: {
    getSkuFromFa() {
      const _this = this;
      let str = "";
      let obj = this.skuResult;
      console.log(obj);
      for (let item in obj) {
        str = str + ":" + obj[item];
      }
      this.sre = str.substring(1, str.length);
      //  this.$emit("totallPrice",this.sre);
      // getSku({
      //   productId: this.$route.query.id,
      //   property: this.sre
      // })
      //   .then(res => {
      //     console.log(res);
      //     res.payload.sre = this.sre;
      //     if (res.payload) _this.$emit("totallPrice", res.payload);
      //   })
      //   .catch(error => {
      //     console.error(error);
      //   });
    },
    transmit() {
      let arr = [];
      arr.push(this.sre);
      arr.push(this.skuResult);

      for (let item of this.mydata) {
        for (let key in item) {
          console.log();
          for (let pop of item[key]) {
            if (this.skuResult[key] === pop.productPropertyValueId)
              this.skuResultVal[key] = pop.productPropertyValue;
          }
        }
      }
      arr.push(this.skuResultVal);
      this.$emit("listenToChildEvent", arr);
    },
    // transmit2() {
    //   this.$emit("listenToSku", this.lianjie);
    // },
    cancel(id, key, disable) {
      if (!disable) {
        if (this.skuResult[key] === id) {
          this.skuResult[key] = null;
        } else {
          this.skuResult[key] = id;
        }
        this.updateSku();
        // this.skuValue();
      }
    },

    initSkuInfo() {
      let key;
      // console.log(this.mydata);
      for (let item of this.mydata) {
        for (key in item) {
          this.$set(this.skuResult, key, null);
          this.$set(this.skuResultVal, key, null);
          for (let pop of item[key]) {
            this.$set(pop, "isDisable", false);
          }
        }
      }
    },

    initSkuActiveCB() {
      let totalPop = [];
      let obj = {};
      for (let item in this.skuInfo) {
        const arr = item.split(":");
        totalPop.push(this.powerSet(arr));
        this.powerSet(arr).forEach(item => {
          obj[item.join(":")] = {};
        });
      }
      this.skuActiveCB = obj;
    },
    joinSku() {
      let string = [];
      for (let item in this.skuResult) {
        string.push(this.skuResult[item]);
      }
      // alert(string);
      this.lianjie = string.join(":");
    },

    powerSet(arr) {
      let ps = [[]];
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0, len = ps.length; j < len; j++) {
          ps.push(ps[j].concat(arr[i]));
        }
      }
      return ps;
    },

    updateSku() {
      for (let item of this.mydata) {
        for (let key in item) {
          for (let pop of item[key]) {
            let obj = {};
            obj = JSON.parse(JSON.stringify(this.skuResult));
            obj[key] = pop.productPropertyValueId;
            let flag = false;
            let now = this.skuResultMD(obj);
            // console.log(now);
            for (let keyCB in this.skuActiveCB) {
              if (keyCB === now) {
                flag = true;
                break;
              }
            }

            if (flag) {
              pop.isDisable = false;
            } else {
              pop.isDisable = true;
            }
          }
        }
      }

      let str = "";
      for (let key in this.skuResult) {
        str = str + ":" + this.skuResult[key];
      }
      this.sre = str.substring(1, str.length);
      this.transmit();
      // console.log(str)
      // console.log("!!!!!!!!!!!!")
    },
    skuValue() {
      for (let item of this.mydata) {
        for (let key in item) {
          for (let pop of item[key]) {
            let obj = {};
            obj = JSON.parse(JSON.stringify(this.skuResult));
            obj[key] = pop.productPropertyValue;
            let flag = false;
            let now = this.skuResultMD(obj);
            // console.log(now);
            // for (let keyCB in this.skuActiveCB) {
            //   if (keyCB === now) {
            //     flag = true;
            //     break;
            //   }
            // }

            // if (flag) {
            //   pop.isDisable = false;
            // } else {
            //   pop.isDisable = true;
            // }
          }
        }
      }
    },
    skuResultMD(obj) {
      let result = "";
      for (let key in obj) {
        if (obj[key] === null) continue;
        if (result === "") {
          result = result + obj[key];
        } else {
          result = result + ":" + obj[key];
        }
      }
      return result;
    }
  },
  computed: {
    string() {
      return `${JSON.stringify(this.skuResult)}`;
    },
    mydata() {
      return this.productInfoPO.list;
    },

    skuInfo() {
      return this.productInfoPO.map;
    }
  },

  created() {
    this.initSkuInfo();
    this.initSkuActiveCB();
    this.updateSku();
  }
};
</script>

<style scoped>
.button {
  margin-top: 5px;
}
.pro-category {
  height: 25px;
  line-height: 25px;
}
.pro-category span {
  display: inline-block;
  line-height: 25px;
  font-size: 18px;
  padding-left: 3px;
  padding-right: 3px;
  box-sizing: border-box;
}
/deep/ .el-radio-button__inner {
  padding: 0;
  display: flex;
  border: none;
  font-size: 16px;
}
/deep/ .el-radio-group {
  margin: 3px;
}
/deep/ .el-radio-group .sku {
  display: inline-block;
  font-size: 18px;
  color: #798b7f;
  width: 90px;
}
/deep/ .el-radio-button {
  background-color: #fff;
  display: inline-flex;
  margin-right: 10px;
  cursor: pointer;
  color: #306242;
  border-radius: 3px;
  overflow: hidden;
  /* width: 100px; */
}
/deep/ .el-radio-button .el-image {
  overflow: initial;
}
/deep/ .el-radio-button p {
  line-height: 35px;
  font-size: 12px;
}
/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #dcddc8cb;
  /* border: 2px solid rgb(180, 165, 77);
  box-sizing: border-box; */
  color: rgb(78, 53, 6);
  animation: none;
}
/* /deep/ .el-radio-button__inner:hover {
  color: #306242;
} */
</style>
